<template>
  <van-search v-model="value" shape="round" placeholder="请输入搜索关键词" @search="onSearch" @cancel="onCancel"></van-search>
  <div class="LunBoTu">
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in images" :key="image">
        <img :src="image" />
      </van-swipe-item>
    </van-swipe>
  </div>
  <van-grid square :column-num="5" :gutter="6">
    <van-grid-item v-for="value in list" :key="value">
      <van-image :src="value.url"></van-image>
      <p>{{ value.text }}</p>
    </van-grid-item>
  </van-grid>
  <div>
    <ul class="zs">
      <li v-for="item in List" :key="item.id">
        <img :src="item.url" />
        <p>{{ item.name }}</p>
      </li>
    </ul>
  </div>
  <div class="mzsx">
    <div class="bt">
      <h3>每周上新</h3>
    </div>
    <ul>
      <li v-for="item in MList" :key="item.Nid">
        <img :src="item.url" />
        <p>{{ item.name }}</p>
        <p><span>￥</span>{{ item.jiaqian }}</p>
      </li>
    </ul>
  </div>
  <div class="rqtj">
    <h3>人气推荐</h3>
    <div class="tj">
      <van-card v-for="item in TList" :key="item.id" :tag="item.tag" :price="item.retail_price"
        :origin-price="item.origin_price" :desc="item.desc" :title="item.name" :thumb="item.url"></van-card>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { showToast } from "vant";

const value = ref("");
const onSearch = (val) => showToast(val);
const onCancel = () => showToast("点击取消");
const images = [
  '/images/banner1.jpg',
  '/images/banner2.jpg',
]

const list = [
  { text: '今日爆款', url: '../icons/menu1.png' },
  { text: '好物分享', url: '../icons/menu2.png' },
  { text: '推荐购买', url: '../icons/menu3.png' },
  { text: '购物心得', url: '../icons/menu4.png' },
  { text: '直播专区', url: '../icons/menu5.png' },
  { text: '签到中心', url: '../icons/menu6.png' },
  { text: '值得购买', url: '../icons/menu7.png' },
  { text: '每日优惠', url: '../icons/menu8.png' },
  { text: '充值中心', url: '../icons/menu9.png' },
  { text: '我的客服', url: '../icons/menu10.png' }
]

const List = [
  { id: 1, name: "直播", url: "../images/product1.png" },
  { id: 2, name: "推荐", url: "../images/product2.png" },
  { id: 3, name: "补贴", url: "../images/product3.png" },
  { id: 4, name: "分享", url: "../images/product4.png" },
];

const MList = [
  { Nid: 1, name: "懒人小沙发", url: "../images/new1.jpg", jiaqian: "128.00" },
  { Nid: 2, name: "减压弹力球", url: "../images/new2.jpg", jiaqian: "89.00" },
  {
    Nid: 3,
    name: "简约一字夹发夹",
    url: "../images/new3.jpg",
    jiaqian: "12.8",
  },
  {
    Nid: 4,
    name: "毛线小兔子耳朵发夹",
    url: "../images/new4.jpg",
    jiaqian: "9.9",
  },
];

const TList = [
  {
    tag: "TOP1",
    retail_price: "299.00",
    name: "蚕丝被 正品桑蚕丝",
    desc: "一级桑蚕丝，轻盈、透气、柔软",
    url: "../images/top1.jpg",
  },
  {
    tag: "TOP2",
    retail_price: "88.00",
    origin_price: "98.00",
    name: "儿童摇摇马",
    desc: "安全、不会侧翻、爸妈放心",
    url: "../images/top2.jpg",
  },
  {
    tag: "TOP3",
    retail_price: "128.00",
    origin_price: "168.00",
    name: "可躺可睡休闲懒人沙发",
    desc: "轻松看书、社交、办公、舒适放松",
    url: "../images/top3.jpg",
  },
  {
    tag: "TOP4",
    retail_price: "199.00",
    origin_price: "205.00",
    name: "儿童积木 拼装玩具",
    desc: "大颗粒 家长更放心 不易吞咽、安全",
    url: "../images/top4.jpg",
  },
  {
    tag: "TOP5",
    retail_price: "89.00",
    origin_price: "99.00",
    name: "扭扭车13岁男女宝宝",
    desc: "儿童扭扭车万向轮 防侧翻大人新款扭扭车",
    url: "../images/top5.jpg",
  },
];
</script>
<style scoped>
.LunBoTu {
  widows: 100%;
}

.LunBoTu img {
  width: 100%;
}

.van-image {
  width: 54%;
}

p {
  font-size: 13px;
}

ul {
  display: flex;
  flex-wrap: wrap;
}

.zs li {
  width: 50%;
  position: relative;
}

.zs img {
  width: 100%;
}

.zs p {
  font-size: 15px;
  position: absolute;
  left: 2px;
  top: -13px;
  background-color: red;
  color: rgb(255, 255, 255);
  border-radius: 5px;
  font-weight: bold;
  padding: 3px;
}

.mzsx ul {
  display: flex;
  flex-wrap: wrap;
}

.mzsx li {
  width: 50%;
}

.mzsx img {
  width: 100%;
}

.mzsx p {
  text-align: center;
  margin: 1px;
}

.mzsx span {
  color: #f57d05;
  font-size: 15px;
}

.bt {
  text-align: center;
  margin-top: 30px;
  height: 50px;
}

.bt h3 {
  width: 50%;
  border-top: 2px solid #ccc;
  padding-top: 10px;
  margin: 0 auto;
}

.renqituijian h3 {
  text-align: center;
  line-height: 30px;
}
</style>